<template>
  <div>
    <h1>测试nestjs的验证码刷新功能</h1>
  </div>
  <div class="loginbox">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="Account:">
        <el-input v-model="form.Account" />
      </el-form-item>
      <el-form-item label="Password:">
        <el-input v-model="form.Password" />
      </el-form-item>
      <el-form-item label="Code:">
        <div style="display: flex; flex: 1;">
          <el-input v-model="form.Code" />
          <div style="width: 30px;padding: 0px 30px;white-space: nowrap;">
            <img @click="imgrefresh" :src="imgurl" alt="">
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </div>
  <div class="loginbox">
    <el-button type="primary" @click="ondownload">点击下载</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
const imgurl = ref<string>('/zck_1/user/imageCode')
const form = reactive({
  Account: '',
  Password: '',
  Code: ''
})
const imgrefresh = ()=>{
  imgurl.value = imgurl.value +'?'+ new Date().getTime
}

const ondownload = async ()=>{
  const url = 'http://192.168.18.57:3000/imgupload/stream'
  const res = await fetch(url).then(res => res.arrayBuffer())
  console.log(res)
  const a = document.createElement('a')
  a.href = URL.createObjectURL(new Blob([res],{
    // type:"image/png"
  }))
  a.download = 'xiaman.zip'
  a.click()
}
const onSubmit = async () => {
  fetch('/zck_1/user/login', {
    method: 'POST',
    body: JSON.stringify(form),
    headers: {
      'content-type': 'application/json'
    }
  }).then((res)=>{
    console.log(res)
  }).catch((err)=>{
    console.log(err)
  })
}
</script>

<style>
.loginbox {
  margin: 20px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
</style>
